<template>
	<view class="page">
		<view class="patient-list" v-if="list.length > 0">
			<view class="patient-item" v-for="(item, index) in list" :key="index" @click="editVisitor(item)">
				<view class="top-userinfo">
					<view class="userinfo">
						<view class="username">{{ item.name }}</view>
						<view class="bottom-info">
							<image class="user-sex" :src="'/static/images/' + (item.sex == 2 ? 'fe' : '') + 'male.png'" mode="aspectFit"></image>
							<view class="user-age">{{ item.sex == 2 ? '女' : '男' }} {{ item.age }}周岁</view>
						</view>
					</view>
					<view v-if="isSelect" class="choose-btn" @tap.stop="chooseVisitor(item)">选择</view>
					<view v-else class="delete-btn" @tap.stop="deleteVisitor(item)">删除</view>
				</view>
				<view class="phone-num">
					<image src="/static/images/telephonesy.png"></image>
					<view class="num">{{ item.phone }}</view>
				</view>
			</view>
		</view>
		<view v-else class="empty-view">暂无就诊人</view>
		<view class="submit-btn" @tap.stop="addVisit()">新增就诊人</view>
		<!-- 弹窗 -->
		<u-popup :show="show" @close="close" mode="center" :round="10">
			<view class="patient-visitor-info">
				<view class="patient-visitor-title">新增就诊人</view>
				<view class="userinfo-list">
					<view class="userinfo-item">
						<view class="userinfo-title">姓名</view>
						<input v-model="patient.name" class="userinfo-tip" placeholder="请输入您的姓名" />
					</view>
					<view class="userinfo-item">
						<view class="userinfo-title">性别</view>
						<view class="userinfo-tip">
							<view class="sex-checkbox">
								<view class="check-box" @click="chooseSex(1)">
									<image v-if="patient.sex == 1" class="check-box-img" src="/static/images/Primaryelection@2x.png"></image>
									<image v-else class="check-box-img" src="/static/images/Primarynot@2x.png"></image>
									<text>男</text>
								</view>
								<view class="check-box" @click="chooseSex(2)">
									<image v-if="patient.sex == 2" class="check-box-img" src="/static/images/Primaryelection@2x.png"></image>
									<image v-else class="check-box-img" src="/static/images/Primarynot@2x.png"></image>
									<text>女</text>
								</view>
							</view>
						</view>
					</view>
					<view class="userinfo-item">
						<view class="userinfo-title">年龄</view>
						<input v-model="patient.age" class="userinfo-tip" type="number" placeholder="请输入周岁年龄" />
					</view>
					<view class="userinfo-item">
						<view class="userinfo-title">手机号</view>
						<input v-model="patient.phone" class="userinfo-tip" placeholder-style="font-size:28rpx" placeholder="如无，可以填写监护人手机号" type="number" />
					</view>
				</view>
				<view class="save-btn" @click="save()">确认保存</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getPatientList, addPatient, editPatient, deletePatient } from '@/apis/request.js';
import { checkMobile, showToast } from '../../../utils/index.js';
export default {
	data() {
		return {
			show: false,
			isSelect: false,
			page: 1,
			total: 0,
			list: [],
			patient: {
				name: '',
				sex: 1,
				age: '',
				phone: ''
			}
		};
	},
	onLoad(options) {
		this.isSelect = options.isSelect || false;
		this.init();
	},
	onPullDownRefresh() {
		this.init();
	},
	onReachBottom() {
		if (this.list.length < this.total) {
			this.getList();
		}
	},
	methods: {
		init() {
			this.page = 1;
			this.total = 0;
			this.list = [];
			this.getList();
		},
		getList() {
			getPatientList({
				pageNo: this.page,
				pageSize: 10
			})
				.then(res => {
					if (this.page == 1) {
						this.total = res.total;
						this.list = res.records;
					} else {
						this.list = this.list.concat(res.records);
					}
					if (this.list.length < this.total) {
						this.page++;
					}
				})
				.finally(() => {
					uni.stopPullDownRefresh();
				});
		},
		close() {
			this.show = false;
		},
		addVisit() {
			this.patient = {
				name: '',
				sex: 1,
				age: '',
				phone: ''
			};
			this.show = true;
		},
		save() {
			if (!this.patient.name) {
				showToast('就诊人姓名不能为空');
				return;
			}
			if (!this.patient.age) {
				showToast('就诊人年龄不能为空');
				return;
			}
			if (!this.patient.phone) {
				showToast('就诊人手机号不能为空');
				return;
			}
			if (!checkMobile(this.patient.phone)) {
				showToast('请输入正确手机号');
				return;
			}
			if (this.patient.id) {
				editPatient(this.patient).then(res => {
					this.show = false;
					this.init();
				});
			} else {
				addPatient(this.patient).then(res => {
					this.show = false;
					this.init();
				});
			}
		},
		chooseSex(flag) {
			//flag 1男 2女
			this.patient.sex = flag;
		},
		//选择按钮
		chooseVisitor(item) {
			uni.$emit('selectPatient', item);
			uni.navigateBack();
		},
		deleteVisitor(item) {
			uni.showModal({
				title: '提示',
				content: '您确定删除该就诊人吗？',
				success: res => {
					if (res.confirm) {
						deletePatient({
							id: item.id
						}).then(res => {
							this.init();
						});
					}
				}
			});
		},
		editVisitor(item) {
			this.patient = Object.assign({}, item);
			this.show = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	background-color: #f2f2f2ff;
	height: 100%;
	min-height: 100vh;

	.patient-list {
		background-color: #fff;

		.patient-item {
			border-bottom: 2rpx solid #ededed;
			padding: 30rpx;

			.top-userinfo {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.userinfo {
					.username {
						font-size: 30rpx;
					}

					.bottom-info {
						margin-top: 16rpx;
						display: flex;
						align-items: center;

						.user-sex {
							width: 28rpx;
							height: 28rpx;
						}

						.user-age {
							font-size: 24rpx;
							color: #666666;
						}
					}
				}

				.choose-btn {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 28rpx;
					background-color: #32C59A;
					text-align: center;
					font-size: 24rpx;
					color: #fff;
				}

				.delete-btn {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 28rpx;
					text-align: center;
					font-size: 24rpx;
					color: #999999;
					border: 2rpx solid #dbdbdb;
				}
			}

			.phone-num {
				margin-top: 16rpx;
				display: flex;
				align-items: center;

				image {
					height: 30rpx;
					width: 26rpx;
				}

				.num {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}

	.submit-btn {
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		background: #32C59A;
		color: #fff;
		text-align: center;
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;
	}

	.patient-visitor-info {
		// height: 640rpx;
		width: 600rpx;
		border-radius: 20rpx;
		box-sizing: border-box;

		.patient-visitor-title {
			text-align: center;
			padding-top: 40rpx;
			font-size: 34rpx;
		}

		.userinfo-list {
			margin-top: 20rpx;
			background-color: #fff;

			.userinfo-item {
				padding: 30rpx;
				border-bottom: 2rpx solid #e8e8e8;
				display: flex;
				align-items: center;

				.userinfo-title {
					font-size: 30rpx;
					width: 160rpx;
				}

				.userinfo-tip {
					width: 100%;
					text-align: right;
					color: #999999;
					font-size: 28rpx;

					.sex-checkbox {
						float: right;
						width: 200rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.check-box {
							display: flex;
							flex-direction: row;
							align-items: center;

							.check-box-img {
								width: 34rpx;
								height: 34rpx;
							}

							text {
								margin-left: 10rpx;
								font-size: 28rpx;
								color: #020202;
							}
						}
					}
				}
			}
		}

		.save-btn {
			width: 496rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			border-radius: 40rpx;
			background: #32C59A;
			color: #fff;
			font-size: 26rpx;
			margin: 30rpx auto;
		}
	}
}
</style>
